<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4CAF50',
secondary: '#2C2C2C'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<script>
function refreshCaptcha() {
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let captcha = '';
for(let i = 0; i < 4; i++) {
captcha += chars[Math.floor(Math.random() * chars.length)];
}
event.target.textContent = captcha;
}
function toggleForm(type) {
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const forgotForm = document.getElementById('forgotForm');
const loginTitle = document.getElementById('loginTitle');
const registerTitle = document.getElementById('registerTitle');
const forgotTitle = document.getElementById('forgotTitle');
loginForm.classList.add('hidden');
registerForm.classList.add('hidden');
forgotForm.classList.add('hidden');
loginTitle.classList.add('hidden');
registerTitle.classList.add('hidden');
forgotTitle.classList.add('hidden');
if(type === 'register') {
  registerForm.classList.remove('hidden');
  registerTitle.classList.remove('hidden');
} else if(type === 'forgot') {
  forgotForm.classList.remove('hidden');
  forgotTitle.classList.remove('hidden');
} else {
  loginForm.classList.remove('hidden');
  loginTitle.classList.remove('hidden');
}
}
function showForgotPassword() {
  toggleForm('forgot');
}
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      const loginButton = document.getElementById('loginButton');
  
      loginButton.addEventListener("click", function(event) {
          event.preventDefault();  // 阻止按钮默认的提交行为
  
          // 获取用户名和密码输入
          const username = document.getElementById('username').value;
          const password = document.getElementById('password').value;
  
          // 构建请求体
          const loginData = {
              username: username,
              password: password
          };
  
          // 发送 POST 请求到后端登录接口
          fetch('http://localhost:3000/api/v1/user/login', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify(loginData)
          })
          .then(response => response.json())
          .then(data => {
              if (data.data.access_token) {
                  console.log('登录成功:', data);
                  // 可以将 token 存储到 localStorage 或 sessionStorage
                  localStorage.setItem('access_token', data.data.access_token);
                  localStorage.setItem('refresh_token', data.data.refresh_token);
                  // 登录成功后跳转到 index.html
                  window.location.href = 'index.html';
              } else {
                  console.log('登录失败:', data);
              }
          })
          .catch(error => {
              console.error('登录请求失败:', error);
          });
      });
  });
</script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="min-h-screen flex items-center justify-center">
<div class="w-[400px] bg-white rounded-lg p-8 shadow-lg">
<h2 id="loginTitle" class="text-2xl font-bold text-gray-800 mb-8">登录</h2>
<h2 id="registerTitle" class="text-2xl font-bold text-gray-800 mb-8 hidden">注册</h2>
<h2 id="forgotTitle" class="text-2xl font-bold text-gray-800 mb-8 hidden">找回密码</h2>
<form id="loginForm" class="space-y-6">
<div>
<div class="relative">
<input type="text" id="username" placeholder="请输入用户名/手机号" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-user absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="relative">
<input type="password" id="password" placeholder="请输入密码" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-lock absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div class="flex space-x-4">
<div class="relative flex-1">
<input type="text" id="captcha" placeholder="请输入验证码" maxlength="4" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-shield-alt absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button type="button" onclick="refreshCaptcha()" class="w-32 h-12 bg-gray-100 rounded-button flex items-center justify-center text-2xl font-bold tracking-[6px] text-gray-600 select-none hover:bg-gray-200 transition-colors" style="font-family: 'Courier New', monospace;">
8K4N
</button>
</div>
<div class="flex justify-between items-center">
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-0 border-gray-300">
<span class="ml-2 text-gray-600">记住密码</span>
</label>
<a href="javascript:void(0)" onclick="showForgotPassword()" class="text-primary hover:text-primary/80">忘记密码？</a>
</div>
<button type="submit" id="loginButton" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 !rounded-button">
登录
</button>
<div class="flex items-center justify-center mt-6">
<span class="text-gray-600">没有账户？</span>
<a href="javascript:void(0)" onclick="toggleForm('register')" class="text-primary hover:text-primary/80 ml-1">立即注册</a>
</div>
</form>
<form id="registerForm" class="space-y-6 hidden">
<div>
<div class="relative">
<input type="text" placeholder="请输入用户名" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-user absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="flex space-x-4">
<div class="relative flex-1">
<input type="email" placeholder="请输入邮箱" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-envelope absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button type="button" class="w-32 h-12 bg-primary text-white font-medium !rounded-button whitespace-nowrap hover:bg-primary/90 transition-colors">
获取验证码
</button>
</div>
</div>
<div>
<div class="relative">
<input type="text" placeholder="请输入邮箱验证码" maxlength="6" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-key absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="relative">
<input type="password" placeholder="请输入密码" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-lock absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="relative">
<input type="password" placeholder="请确认密码" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-lock absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div class="flex space-x-4">
<div class="relative flex-1">
<input type="text" placeholder="请输入验证码" maxlength="4" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-shield-alt absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button type="button" onclick="refreshCaptcha()" class="w-32 h-12 bg-gray-100 rounded-button flex items-center justify-center text-2xl font-bold tracking-[6px] text-gray-600 select-none hover:bg-gray-200 transition-colors" style="font-family: 'Courier New', monospace;">
8K4N
</button>
</div>
<div class="flex justify-between items-center">
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-0 border-gray-300">
<span class="ml-2 text-gray-600">同意服务条款</span>
</label>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 !rounded-button">
注册
</button>
<div class="flex items-center justify-center mt-6">
<span class="text-gray-600">已有账户？</span>
<a href="javascript:void(0)" onclick="toggleForm('login')" class="text-primary hover:text-primary/80 ml-1">返回登录</a>
</div>
</form>
<form id="forgotForm" class="space-y-6 hidden">
<div>
<div class="relative">
<input type="email" placeholder="请输入邮箱" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-envelope absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="flex space-x-4">
<div class="relative flex-1">
<input type="text" placeholder="请输入邮箱验证码" maxlength="6" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-key absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<button type="button" class="w-32 h-12 bg-primary text-white font-medium !rounded-button whitespace-nowrap hover:bg-primary/90 transition-colors">
获取验证码
</button>
</div>
</div>
<div>
<div class="relative">
<input type="password" placeholder="请输入新密码" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-lock absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<div>
<div class="relative">
<input type="password" placeholder="请确认新密码" class="w-full bg-gray-50 text-gray-800 px-4 py-3 rounded-button border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-lock absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 !rounded-button">
重置密码
</button>
<div class="flex items-center justify-center mt-6">
<a href="javascript:void(0)" onclick="toggleForm('login')" class="text-primary hover:text-primary/80">返回登录</a>
</div>
</form>
</div>
</div>
</body>
</html>
